<template>
    <div class="box">
        <van-tabs title-active-color="#35ee11"
                    type="line"
                    v-model="active"
                    @change="onChange"      
        >
            <van-tab class="v-tab" v-for="item in list" :title="item.name" :key="item.id">
                <CardView :Lists="targetEatList"></CardView>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import $ from "@/utils/request"
import CardView from "./CardView.vue";
export default {
    name: "EatTabTit",
    data() {
        return {
            active: "",
            str: "recipe/menulist/",
            targetEatList: [],
        };
    },
    props: {
        list: Array,
        eatList: Array,
    },
    methods: {
        async onChange(index) {
            // const sot = await $.getAxios("recipe/menulist/" + this.eatList[index]);
            const sot = await $.getAxios(this.str + this.eatList[index]);
            // console.log(sot)
            this.targetEatList = sot.data.data.big_recommend.list;
            // console.log(this.targetEatList);
            // this.$emit("eatList",this.targetEatList);   
            
        }
        
    },
    components: { CardView },
    async created(){
        this.$bus.$on("getIndex",res => {
           this.active = res
        });
        const sot = await $.getAxios("recipe/menulist/lk01.json");
        // console.log(sot)
        this.targetEatList = sot.data.data.big_recommend.list;
        // console.log(this.targetEatList);
        // this.$emit("eatList",this.targetEatList);

    }
}
</script>

<style>

</style>